* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Microsoft Yahei";
    font-size:16px;
}

a {
    text-decoration: none;
    color: #697a8e;
    ;
}
li:hover{
    cursor: pointer;
}
a:visited {
    color: #697a8e;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

li,
dt,
dd {
    list-style: none;
}


/*header 头部*/

.header {
    position: relative;
    height: 50px;
    background-color: #2189bf;
}

.header a {
    position: absolute;
    right: 50px;
    bottom: 15px;
    color: white;
    font-size: 0.8rem;
}

.header input {
    position: absolute;
    width: 100px;
    right: 269px;
    padding: 5px;
    border: none;
    bottom: 10px;
    border-radius: 20px;
    text-indent: 20px;
    background: url(img/task09-header02.png) no-repeat 5px white;
    transition-property: width, border-radius;
    transition-duration: 1s, 1s
}

.header input:focus {
    width: 200px;
    border-radius: 0;
    transition-property: width, border-radius;
    transition-duration: 1s, 1s
}

.header img[alt="logo"] {
    position: absolute;
    left: 46px;
    top: 8px;
    width: 35px;
    border-radius: 5px;
    height: 35px;
    vertical-align: text-bottom;
}


/*aside 左侧的边栏*/

.wrapper {
    position: absolute;
    top: 50px;
    bottom: 0;
    width: 100%;
    overflow: auto;
}

.aside img[alt="photo"] {
    width: 65px;
    height: 65px;
    border-radius: 65px;
}

.aside {
    position: absolute;
    background-color: #2a2e3d;
    width: 200px;
    color: #697a8e;
    height: 100%;
    overflow: auto;
}

.aside-icon {
    padding-left: 0;
    margin: 0;
    text-indent: 32px;
    font-size: 0.8rem;
}

.aside-hint {
    margin: 10px 0;
}

.aside-icon-dd {
    margin: 0;
    text-indent: 92px;
}

.aside-icon-dd,
.aside-icon-dt {
    cursor: pointer;
    background-color: #383d4e;
}

.aside-icon li,
.aside-icon-dd,
.aside-icon-dt {
    padding: 6% 0;
}

.aside-icon li:first-child a:hover,
.aside-hint li:hover,
.aside li:hover,
.aside-icon li:hover {
    background-color: #383d4e;
    color: #fff;
}

.aside-icon-dt {
    text-indent: 66px;
    background: url(img/task09-aside04.png) no-repeat 52px #383d4e;
}

.aside-icon-dt:hover {
    background: url(img/task09-aside11.png) no-repeat 52px #fff;
}
.aside-icon li:nth-child(3){
        background: url(img/task09-aside11.png) no-repeat 52px #383d4e;
}
.aside-icon li:nth-child(3),
.aside-icon li:nth-child(4) {
    color: #fff;
}

.aside-icon li:first-child {
    background-color: #383d4e;
}

.aside-icon li:first-child a {
    color: #fff;
}

.aside-top {
    text-align: center;
    margin-top: 15px;
}

.aside-top span {
    display: block;
}

.aside-hint ul {
    padding-left: 6px;
}

.aside-hint li {
    display: inline-block;
    padding: 0 26px;
}

.aside-hint li:first-child {
    border-right: 2px solid #383d4e;
}

.aside img[alt="aside-icon"] {
    padding-right: 8px;
}


/*main 下右侧主内容区*/

.main {
    position: absolute;
    height: 100%;
    margin-left: 200px;
    background-color: #eeeeed;
    overflow: auto;
}

.main-header {
    background-color: #fff;
    font-size: 0.9rem;
    color: #b6b5b5;
    padding: 10px;
    text-indent: 20px;
}

.main-header span:hover {
    color: #2189BF;
    cursor: pointer;
}

.main-header span:last-child {
    color: #2189bf;
}


/*main-part01*/

.main-part01 {
    padding: 2rem 4rem;
    margin: 2rem 1rem;
}

.main-part01 label {
    color: #b6b5b5;
    font-size: 0.8rem;
}

.main-part01 select,
.main-part01 input {
    margin: 10px 18px 0 0;
    font-size: 0.8rem;
}

.main-part01-box {
    display: inline-block;
    width: 165px;
    height: 55px;
}

.main-part01-box-mark {
    width: 370px;
    text-align: right;
}

.main-part01 div:first-child {
    width: 160px;
    vertical-align: text-bottom;
}

.main-part01 div:nth-child(2) {
    background: url(img/task09-mainpart01-01.png) no-repeat 135px 17px;
}

.main-part01-box select[id="box"] {
    width: 80px;
    margin-top: 7px;
}

.main-part01-box-mark select[id="number"] {
    width: 100px;
}

.main-part01-box-mark select:last-child {
    width: 141px;
}

.main-part01-box-mark select:last-child,
.main-part01-box select[id="seller"] {
    margin-top: 10px;
}

.main-part01-box select[id="seller"],
.main-part01-box select[id="buyer"] {
    width: 100px;
}

.main-part01 input:last-child {
    margin-left: 2rem;
    vertical-align: text-bottom;
    border: none;
    margin-bottom: 15px;
    line-height: 24px;
    background-color: #388ac1;
    display: inline-block;
    color: #fff;
    padding: 2px 15px;
    transition: border-radius 1s;
}

.main-part01 input:last-child:hover {
    border-radius: 20px;
    transition: border-radius 1s;
}


/*main-part02 已采用flex定位*/

.main-part02 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 2rem 1rem;
}

.main-part02-btn {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.main-part02-class {
    -webkit-flex-grow: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
}

.main-part02-search {
    -webkit-flex-grow: 3;
    -ms-flex-positive: 3;
    flex-grow: 3;
}

.main-part02 li {
    padding: 1rem;
}

.main-part02 li:nth-child(2) {
    border-top: 5px solid #4388c9;
}

.main-part02 li:nth-child(2):hover,
.main-part02 li:nth-child(3):hover,
.main-part02 li:nth-child(4):hover,
.main-part02 li:nth-child(5):hover,
.main-part02 li:nth-child(6):hover,
.main-part02 li:nth-child(7):hover {
    border-top: 5px solid #4388c9;
    cursor: pointer;
}

.main-part02-btn a,
.main-part02-class a {
    display: block;
}

.main-part02-btn {
    text-indent: -999999999999999999999px;
    cursor: pointer;
}

.main-part02-class span {
    display: inline-block;
}

.main-part02-class {
    text-align: center;
    color: #ABABAB;
    margin: 0 1rem;
}

.main-part02-time {
    font-size: .9rem;
    color: #000;
}

.main-part02-price {
    font-size: 1.3rem;
    color: #ED6300;
}

.main-part02-btn-left {
    background: url(img/task09-mainpart02-01.png) no-repeat center;
}

.main-part02-btn-right {
    background: url(img/task09-mainpart02-02.png) no-repeat center;
}

.main-part02-search {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
}

.main-part02-search a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}


/*main-part03*/

.main-part03 {
    margin: 2rem 1rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.main-part03-ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.main-part03 span {
    color: #ACACAB;
}

.main-part03-title {
    margin-bottom: 10px;
}

.main-part03 li {
    width: 180px;
    display: inline-block;
    padding: 10px;
    font-size: 0.9rem;
}

.main-part03 li:nth-child(1) {
    border-left: 5px solid #43b29e;
    background: url(img/task09-mainpart03-01.png) no-repeat #fff 100px;
}

.main-part03 li:nth-child(2) {
    border-left: 5px solid #388ac1;
    background: url(img/task09-mainpart03-02.png) no-repeat #fff 100px;
}

.main-part03 li:nth-child(3) {
    border-left: 5px solid #d04a36;
    background: url(img/task09-mainpart03-03.png) no-repeat #fff 100px;
}

.main-part03 li:nth-child(4) {
    border-left: 5px solid #e2cd46;
    background: url(img/task09-mainpart03-04.png) no-repeat #fff 100px;
}


/*main-part04*/

.main-part01,
.main-part02 li,
.main-part02 div:nth-child(1),
.main-part02 div:nth-child(3),
.main-part02 div:nth-child(4),
.main-part03 li,
.main-part04,
.main-part05,
.main-part06,
.main-part07 {
    background-color: #fff;
    box-shadow: 10px 10px 5px #888;
}

.main-part04-title,
.main-part05-title,
.main-part06-title,
.main-part07-title {
    background-color: #F4F5F7;
    color: #b0afaf;
    padding: 15px;
    margin: 0;
}

.main-part04 {
    width: 600px;
    margin: 0 0 2rem 1rem;
}

.main-part04-project {
    padding-top: 15px;
}

.main-part04-detail {
    margin: 0 0 20px 59px;
}

.main-part04-project li {
    display: inline-block;
    padding: 6px 19.3px;
    background-color: #D6D6DE;
    font-size: 16px;
}

.main-part04 ul {
    margin-left: 59px;
}

.main-part04-detail td {
    border: 1px solid #000;
    font-size: 12px;
    padding: 2px 6px 2px 6px;
}

li:target {
    background-color: #fff;
    border: 1px solid #b0afaf;
    border-bottom: none;
}

.main-part04 table {
    display: inline-block;
    text-align: center;
    padding: 25.5px;
    border: 1px solid #b0afaf;
}


/*main-part05*/

.main-part05 {
    margin: 0 0 2rem 1rem;
}

.main-part05 span {
    color: #C6C6C6;
    display: inline-block;
}

.main-part05 ul,
.main-part05 div {
    font-size: 0.85rem;
}

.main-part05-ul {
    display: inline-block;
    margin: 10px 0 68px 35px;
}

.main-part05-ul-li {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.main-part05-price,
.main-part05-manager {
    display: inline-block;
}

.main-part05-price {
    width: 40%;
    border-right: 1px solid #eee;
}

.main-part05-manager {
    width: 50%;
}

.main-part05-bottom {
    padding: 0.88rem;
    border-top: 1px solid #eee;
}

.main-part05-ul li:last-child {
    margin-bottom: 27px;
}

.search-btn {
    border: none;
    line-height: 1.5rem;
    background-color: #388ac1;
    margin-left: 170px;
    color: #fff;
    padding: 2px 15px;
    transition: border-radius, background-color, color 1s;
}

.search-btn:hover {
    border-radius: 20px;
    background-color: #fff;
    color: #388ac1;
    transition: all 1s;
}


/*main-part06*/

.main-part06 {
    width: 360px;
    margin:0 0 2rem 1rem;
}

.main-part06-header {
    font-size: 0.8rem;
    margin: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #A8CFEC;
}

.main-part06-header span {
    cursor: pointer;
    border: 1px solid #eee;
    padding: 3px 13px;
    margin: 0 4px;
    background: url(img/task09-mainpart06-01.png) no-repeat #fff right center;
}

.main-part06-header span:last-child {
    background: #fff;
}

.main-part06-middle {
    padding-left: 0;
    font-size: 0.95rem;
    border-bottom: 1px solid #ECECEC;
    padding: 0 0 1rem 0;
    text-align: center;
}

.main-part06-middle li {
    display: inline-block;
    padding:0 13px;
}

.main-part06-bottom li {
    float: left;
    font-size: 0.7rem;
    height: 2rem;
    text-align: center;
    width: 46px;
    margin: 2px 0;
}

.main-part06-bottom {
    margin-left: 1rem;
}

.festival,
.weekend {
    color: #CE343C;
}

.main-part06-choosed {
    border: 1px solid #F5C11D;
    box-sizing: border-box;
}


/*main-part07*/

.main-part07 {
    margin: 0 0 2rem 1rem;
    width: 600px;
}

.main-part07 tr:hover {
    cursor: pointer;
    background-color: #eee;
}

.main-part07 th,
.main-part07 td {
    padding: 0px 31px;
    border: 1px solid #eee;
}

.main-part07 table {
    text-align: center;
    font-size: 16px;
    margin: 22px auto;
}

.main-part07-img {
    display: inline-block;
    width: 146px;
    float: right;
    margin-top: 10px;
    margin-left: 19px;
    height: 5px;
    background-color: #eee;
}

.top1 {
    background-color: #EE6E53;
    height: 100%;
    display: block;
    width: 80%;
}

.top2 {
    background-color: #EF8150;
    height: 100%;
    display: block;
    width: 76%;
}

.top3 {
    background-color: #F19E4E;
    height: 100%;
    display: block;
    width: 60%;
}

.top4 {
    background-color: #7FCBEF;
    height: 100%;
    display: block;
    width: 50%;
}

.top5 {
    background-color: #7FCBEF;
    height: 100%;
    display: block;
    width: 40%;
}

.top6 {
    background-color: #7FCBEF;
    height: 100%;
    display: block;
    width: 36%;
}

.top7 {
    background-color: #7FCBEF;
    height: 100%;
    display: block;
    width: 30%;
}

.top8 {
    background-color: #7FCBEF;
    height: 100%;
    display: block;
    width: 28%;
}

.top9 {
    background-color: #7FCBEF;
    height: 100%;
    display: block;
    width: 20%;
}

.top10 {
    background-color: #7FCBEF;
    height: 100%;
    display: block;
    width: 10%;
}